<template>
  <div>
    <div class="public-title">个人信息</div>
    <div class="m-userInfo">
      <div class="info f-left">
        <div class="infoWrap"><a class="avatar f-left" target="_blank"><img width="66" :src="agentData.headImg+'&'+Math.random() || require('../../../assets/img/mange/crm-head.png')"></a>
          <div class="name">
            <div class="nickname"><a>{{ agentData.userName }}</a></div><a class="w-levelname" target="_blank"><noscript></noscript><span class="w-icon-member member-top-vip0"></span></a>
          </div>
        </div>
        <div class="growWrap">
          <div class="growNum"><span><a>简介 &gt;&gt;</a></span></div>
          <div class="process">
            {{ agentData.personSummary }}
          </div><noscript></noscript><a class="w-levelname" target="_blank"><span class="w-icon-member member-top-vip0"></span></a>
        </div>
      </div>
      <div class="asset f-left">
        <div class="item">
          <div class="label">职业证书编号</div>
          <div class="content"><a href="http://iir.circ.gov.cn/web/" target="_blank"><span>{{ agentData.certificateNo }}</span></a></div>
        </div>
        <div class="item">
          <div class="label">从属公司</div>
          <div class="content"><a target="_blank"><span>{{ agentData.companyName }}</span></a></div>
        </div>
        <div class="item">
          <div class="label">工号</div>
          <div class="content"><a><span>{{ agentData.jobNumber }}</span></a></div>
        </div>
        <div class="item">
          <div class="label">顾问电话</div>
          <div class="content"><a target="_blank"><span>{{ agentData.phone }}</span></a><i class="w-icon-common icon-common-open-eye"></i></div>
        </div>
        <div class="item">
          <div class="label">地区</div>
          <div class="content"><a target="_blank">{{ agentData.userName }}</a></div>
        </div>
        <!-- <div class="item" >
                    <div class="label" >待领礼包</div>
                    <div class="content" ><a href="/membership/index" target="_blank" ><span>0</span><span >个</span></a></div>
                </div> -->
      </div>
      <div class="code-img">
        <img :src="agentData.qrCodePath ||' ../../../assets/img/mange/code.jpg'" alt="">
      </div>
    </div>
    <br>
    <div class="public-title">信息设置</div>
    <Tabs type="card">
      <TabPane label="个人资料">
        <Form id="formPerson" ref="formPerson" :model="agentData" :rules="ruleValidatePerson" :label-width="120">

          <FormItem label="头像">
            <a class="up-head-img">
              <img width="66" :src=" upHeadImg || require('../../../assets/img/mange/crm-head.png')">
              <input ref="headFile" @change="getHeadImg" id="headFile" type="file" accept="image/*">
            </a>
          </FormItem>
          <FormItem label="手机号码">
            <p>{{ agentData.phone }}</p>
          </FormItem>
          <FormItem label="姓名" prop="userName">
            <Input size='large' v-model="agentData.userName" placeholder="请输入您的姓名"></Input>
          </FormItem>
          <FormItem label="地区" prop="city">
            <al-selector level='2' @on-change="changeArea" size="large" :auto='true' v-model="city" />
          </FormItem>
          <FormItem label="身份证" prop="idCard">
            <Input size='large' v-model="agentData.idCard" placeholder="请输入您的身份证"></Input>
          </FormItem>
          <FormItem label="工号" prop="jobNumber">
            <Input size='large' v-model="agentData.jobNumber" placeholder="请输入您的工号"></Input>
          </FormItem>
          <FormItem label="职业证书编号" prop="certificateNo">
            <Input size='large' v-model="agentData.certificateNo" placeholder="请输入职业证书编号"></Input>
          </FormItem>
          <FormItem label="微信号码" prop="wechart">
            <Input size='large' v-model="agentData.wechart" placeholder="请输入微信号码"></Input>
          </FormItem>
          <FormItem label="所属公司">
            <Select size='large' label-in-value @on-change="companyNameChange" filterable remote v-model="agentData.companyId" placeholder="请输入所属公司">
              <Option v-for="(item,index) in companyData" :key="index" :value="item.id">{{ item.compnaySimpleName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="主营险种">
            <Select size='large' v-model="agentData.intype" placeholder="请输入主营险种">
              <Option value="寿险">寿险</Option>
              <Option value="车险">车险</Option>
            </Select>
          </FormItem>
          <FormItem label="个人简介" prop="personSummary">
            <Input size='large' v-model="agentData.personSummary" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入您的个人简介..."></Input>
          </FormItem>
          <FormItem>
            <Button size='large' type="primary" @click="baseupdate('formPerson')">提交</Button>
            <!-- <Button size='large' @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="转发封面">
        <Form id="formForword" ref="forwardValidate" :model="agentData" :rules="ruleValidatePerson" :label-width="120">
          <FormItem prop="userName" label="转发标题">
            <Input size='large' v-model="agentData.xcxTitle" type="text" placeholder="请输入标题内容..."></Input>
            </Input>
          </FormItem>
          <FormItem label="转发封面">
            <div class="crm-list">
              <div class="upLoadControl">
                <Icon type="ios-cloud-upload" size="52"></Icon>
                <input ref="forwardCocerFile" @change="getforWardCover" id="upLoadControlInput" type="file" accept="image/*">
              </div>
              <Card v-show="upForWardImg" style="width:158px" id="forwardCover">
                <img class="default-head" :src="upForWardImg">
                <div class="upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(upForWardImg)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="removeView()"></Icon>
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem label="系统封面">
            <div class="crm-list">
              <Card @click.native="customIview('http://www.sinelinked.com/static/other/pic-bg1.jpg')" style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="http://www.sinelinked.com/static/other/pic-bg1.jpg">
                </div>
              </Card>
              <Card @click.native="customIview('http://www.sinelinked.com/static/other/pic-bg2.jpg')" style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="http://www.sinelinked.com/static/other/pic-bg2.jpg">
                </div>
              </Card>
              <Card @click.native="customIview('http://www.sinelinked.com/static/other/pic-bg3.jpg')" style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="http://www.sinelinked.com/static/other/pic-bg3.jpg">
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem>
            <Button size='large' type="primary" @click="forwardupdate('forwardValidate')">提交</Button>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="个人秀">
        <br>
        <Form id="formShow" ref="formValidate" :model="agentData" :rules="ruleValidatePerson" :label-width="120">
          <FormItem label="个人秀封面">
            <div class="crm-list">
              <div class="upLoadControl">
                <Icon type="ios-cloud-upload" size="52"></Icon>
                <input ref="forshowCocerFile" @change="getShowCover" id="upLoadControlInput" type="file" accept="image/*">
              </div>
              <Card v-show="upShowImg" style="width:158px" id="forwardCover">
                <img class="default-head" :src="upShowImg">
                <div class="upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(upShowImg)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="removeView()"></Icon>
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem prop="userName" label="这一刻想法">
            <Input size='large' v-model="agentData.personSummary" type="textarea" :autosize="{minRows: 3,maxRows: 4}" placeholder="Enter something..."></Input>
            </Input>
          </FormItem>
          <FormItem label="个人秀相片" prop="userName">
            <div class="crm-list">
              <Card @click.native="customIview" style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem>
            <Button size='large' type="primary" @click="handleSubmit('formInline')">提交</Button>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="修改密码">
        <br>
        <Form id="formPass" ref="formValidate" :model="agentData" :rules="ruleValidatePerson" :label-width="120">
          <FormItem prop="userName" label="原密码">
            <Input size='large' v-model="agentData.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem prop="userName" label="新密码">
            <Input size='large' v-model="agentData.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem prop="userName" label="重复新密码">
            <Input size='large' v-model="agentData.name" placeholder="Enter your name"></Input>
          </FormItem>

          <FormItem>
            <Button size='large' type="primary" @click="handleSubmit('formInline')">提交</Button>
          </FormItem>
        </Form>
      </TabPane>
    </Tabs>
    <Modal title="View Image" v-model="viewImage">
      <img :src="viewImageData" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
export default {
  created() {
    this.search();
    this.fuzzysearch();
  },
  data() {
    return {
      agentData: {}, //顾问信息
      upHeadImg: "", //上传的头像base64数据
      upForWardImg: "", //上传的转发封面base64数据
      upShowImg:'',//上传的个人秀封面base64数据
      viewImage: false, //图片预览
      viewImageData: "", //图片预览图片
      city: [],
      companyData: [], //保险公司名称
      // 基本资料验证
      ruleValidatePerson: {
        userName: [
          {
            required: true,
            message: "必填项,请输入内容",
            trigger: "blur"
          }
        ],
        city: [
          {
            required: true,
            message: "必填项,请输入内容",
            trigger: "blur"
          }
        ],
        idCard: [
          {
            required: true,
            message: "必填项,请输入内容",
            trigger: "blur"
          }
        ],
        jobNumber: [
          {
            required: true,
            message: "必填项,请输入内容",
            trigger: "blur"
          }
        ],
        certificateNo: [
          {
            required: true,
            message: "必填项,请输入内容",
            trigger: "blur"
          }
        ],
        wechart: [
          {
            required: true,
            message: "必填项,请输入内容",
            trigger: "blur"
          }
        ],
        personSummary: [
          {
            required: true,
            message: "请输入个人简介",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            message: "字数不得少于20个汉字",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    //查询顾问信息
    search() {
      this.$axios({
        method: "get",
        url: this.$GLOBAL.baseURL + "/api/agent/search"
      })
        .then(result => {
          if (result.data[0]) {
            this.agentData = result.data[0];
            if (result.data[0].area) {
              this.city.push(result.data[0].area.split("|")[0]);
              this.city.push(result.data[0].area.split("|")[1]);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 根据公司名模糊匹配公司全名
    fuzzysearch(insurerName = "") {
      this.$axios({
        method: "get",
        url: this.$GLOBAL.baseURL + "/api/insurer/fuzzysearch",
        params: {
          rows: 200,
          insurerName: insurerName
        }
      })
        .then(result => {
          this.companyData = result.data;
        })
        .catch(err => {});
    },
    // 基本信息修改
    baseupdate(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var formData = new FormData();
          formData.append("imgHeadFile", this.$refs.headFile.files[0]);
          formData.append("userName", this.agentData.userName);
          formData.append("province", this.agentData.province); //执业区域（省），地区代号
          formData.append("city", this.agentData.city); //执业区域（市），地区代号
          formData.append("idCard", this.agentData.idCard);
          formData.append("jobNumber", this.agentData.jobNumber);
          formData.append("certificateNo", this.agentData.certificateNo);
          formData.append("wechart", this.agentData.wechart);
          formData.append("intype", this.agentData.intype);
          formData.append("companyId", this.agentData.companyId);
          formData.append("companyName", this.agentData.companyName);
          formData.append("personSummary", this.agentData.personSummary);

          // 修改
          this.$axios({
            method: "post",
            url: this.$GLOBAL.baseURL + "/api/agent/update",
            data: formData
          })
            .then(result => {
              if (result.data.code == 0) {
                this.$Notice.success({
                  title: "消息提示",
                  desc: "资料修改成功"
                });
                this.search();
              }
            })
            .catch(err => {
              this.$Notice.error({
                title: "消息提示",
                desc: err.response.data.error
              });
            });
        }
      });
    },
    // 头像预览
    getHeadImg() {
      var _this = this;
      var fileObj = this.$refs.headFile;
      var fileReader = new FileReader();
      fileReader.readAsDataURL(this.$refs.headFile.files[0]);
      fileReader.onload = function(e) {
        _this.upHeadImg = e.target.result;
      };
    },
    //
    changeArea() {
      this.agentData.province = this.city[0].code;
      this.agentData.city = this.city[1].code;
    },
    // 公司选择
    companyNameChange(val) {
      this.agentData.companyName = val.label;
    },
    // 转发封面预览
    getforWardCover() {
      var _this = this;
      var fileReader = new FileReader();
      fileReader.readAsDataURL(this.$refs.forwardCocerFile.files[0]);
      fileReader.onload = function(e) {
        _this.upForWardImg = e.target.result;
      };
    },
        // 转发封面预览
    getShowCover() {
      var _this = this;
      var fileReader = new FileReader();
      fileReader.readAsDataURL(this.$refs.forshowCocerFile.files[0]);
      fileReader.onload = function(e) {
        _this.upShowImg = e.target.result;
      };
    },
    // 预览
    handleView(imgData) {
      this.viewImage = true;
      this.viewImageData = imgData;
    },
    //删除
    removeView() {
      this.upForWardImg = "";
      this.upShowImg = "";
    },
    // 转发封面信息修改
    forwardupdate(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var formData = new FormData();
          formData.append("xcxTitle", this.agentData.xcxTitle);
          formData.append("shareImageStr", this.upForWardImg);

          // 修改
          this.$axios({
            method: "post",
            url: this.$GLOBAL.baseURL + "/api/agent/update",
            data: formData
          })
            .then(result => {
              if (result.data.code == 0) {
                this.$Notice.success({
                  title: "消息提示",
                  desc: "资料修改成功"
                });
                this.search();
              }
            })
            .catch(err => {
              this.$Notice.error({
                title: "消息提示",
                desc: err.response.data.error
              });
            });
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    // 预览封面模板
    customIview(imgUrl) {
      this.$Modal.confirm({
        title: "模板一",
        closable: true,
        width: "520",
        content: `<p><img src ="${imgUrl}"  /></p>`,
        okText: "选择此模板",
        cancelText: "取消"
      });
    }
  }
};
</script>

<style scoped>
.m-userInfo {
  padding: 30px 0;
  border: 1px solid #eaeaea;
  font-size: 14px;
  overflow: hidden;
  position: relative;
}

.m-userInfo:after,
.m-userInfo:before {
  content: " ";
  display: table;
}

.m-userInfo .info {
  width: 281px;
  padding-left: 28px;
  border-right: 1px dashed #d2d2d2;
}

.m-userInfo .info .infoWrap {
  margin: 3px 0 17px;
}

.m-userInfo .info .infoWrap .avatar {
  display: inline-block;
  margin-right: 16px;
  border: 2px solid #f1f1f1;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  overflow: hidden;
}

.m-userInfo .info .infoWrap .avatar img {
  width: 100%;
}

.m-userInfo .info .infoWrap .name {
  height: 70px;
  display: table-cell;
  vertical-align: middle;
}

.m-userInfo .asset .item:after,
.m-userInfo .asset .item:before,
.m-userInfo .info .growWrap .growNum:after,
.m-userInfo .info .growWrap .growNum:before {
  display: table;
  content: " ";
}

.m-userInfo .info .infoWrap .name .nickname {
  margin-bottom: 8px;
  max-width: 134px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-userInfo .info .growWrap {
  width: 220px;
}

.m-userInfo .info .growWrap .growNum {
  margin-bottom: 9px;
}

.m-userInfo .info .growWrap .process {
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 19px;
}

.m-userInfo .info .growWrap .process .num {
  height: 8px;
  background-color: #bea988;
}

.m-userInfo .asset {
  width: 550px;
  padding-left: 50px;
}

.m-userInfo .asset .item {
  /* float: left; */
  width: 262px;
  line-height: 36px;
  overflow: hidden;
}

.m-userInfo .asset .item .label {
  float: left;
  width: 88px;
  margin-right: 20px;
  text-align: left;
}

.m-userInfo .asset .item .content {
  float: left;
}

.m-userInfo .icon-common-close-eye,
.m-userInfo .icon-common-open-eye {
  vertical-align: -6px;
  margin-left: 9px;
  cursor: pointer;
}
.code-img {
  position: absolute;
  width: 200px;
  right: 30px;
}
.code-img img {
  width: 100%;
}
.f-left {
  float: left;
}
/* formPerson */
#formPerson {
  margin-top: 20px;
  width: 60%;
  padding-left: 40px;
}
#formPerson >>> .ivu-form-item-label {
  text-align: left !important;
}
.up-head-img {
  width: 70px;
  height: 70px;
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 50%;
}
.up-head-img img {
  width: 100%;
}
#headFile {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* formForword */
#formForword {
  margin-top: 20px;
  padding-left: 40px;
  width: 80%;
}
#formForword >>> .ivu-form-item-label {
  text-align: left !important;
}
.upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  align-content: center;
  justify-content: center;
}
#forwardCover:hover .upload-list-cover {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 6px;
}
/* .crm-list  */
.crm-list {
  display: flex;
  flex-wrap: wrap;
}
.crm-list .ivu-card {
  margin-right: 10px;
  margin-bottom: 10px;
  height: 110px;
  overflow: hidden;
}
.crm-list >>> .ivu-card-body {
  padding: 0;
}
.crm-list .default-head {
  /* border-radius: 50%; */
  width: 100%;
  height: 100%;
}
#formShow,
#formPass {
  width: 80%;
}
#formShow {
  margin-top: 20px;
  padding-left: 40px;
}
#formShow >>> .ivu-form-item-label {
  text-align: left !important;
}
#formPass {
  margin-top: 20px;
  padding-left: 40px;
}
#formPass >>> .ivu-form-item-label {
  text-align: left !important;
}

#formPerson >>> .ivu-row {
  margin-left: 0 !important;
}
#formPerson >>> .ivu-col-span-8 {
  padding-left: 0 !important;
}
/* upLoadControl */
.upLoadControl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 158px;
  height: 110px;
  overflow: hidden;
  border: 1px solid #dcdee2;
  border-radius: 6px;
  margin-right: 10px;
  position: relative;
}
.upLoadControl .ivu-icon {
  display: block;
  width: 158px;
  text-align: center;
}
#upLoadControlInput {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>